<th:block xmlns:th="http://www.thymeleaf.org">
  <style>
    .fuelux .wizard .step-content {
      padding: 30px;
    }
    .fuelux .wizard > .steps-container > .steps li.complete:hover {
      cursor: default;
    }
    #fieldsMapping th,
    #fieldsMapping td {
      padding: 6px 0;
      vertical-align: middle;
      border-bottom: 1px dotted #dee2e6;
      border-top: 0 none;
    }
    #fieldsMapping thead th {
      border-bottom: 1px solid #dee2e6;
      padding-top: 9px;
    }
    #fieldsMapping td > em {
      font-style: normal;
      background-color: #eee;
      display: inline-block;
      min-width: 30px;
      font-size: 12px;
      text-align: center;
      margin-right: 4px;
      padding-top: 1px;
      color: #777;
    }
    #fieldsMapping td > i.zmdi {
      float: right;
      color: #aaa;
      font-size: 1.4rem;
      margin-right: 10px;
    }
    #user-warn .alert {
      margin-top: 10px;
      margin-bottom: 0;
    }
    .progress-bar {
      transition: width 1s linear;
    }
  </style>

  <div class="row wizard-row">
    <div class="col-md-12 fuelux">
      <div class="wizard wizard-ux rounded">
        <div class="steps-container">
          <ul class="steps">
            <li data-step="1" class="active">[[${bundle.L('上传文件')}]] <i class="chevron"></i></li>
            <li data-step="2">[[${bundle.L('字段映射')}]] <i class="chevron"></i></li>
            <li data-step="3">[[${bundle.L('开始导入')}]] <i class="chevron"></i></li>
          </ul>
          <div class="step-content">
            <div data-step="1" class="step-pane active">
              <form class="simple">
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('选择导入实体')}]]</label>
                  <div class="col-md-12 col-xl-6 col-lg-8">
                    <select class="form-control form-control-sm" id="toEntity"></select>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('上传数据文件')}]]</label>
                  <div class="col-md-12 col-xl-6 col-lg-8">
                    <div class="float-left">
                      <div class="file-select">
                        <input type="file" class="inputfile" id="upload-input" accept=".xlsx,.xls,.csv" data-local="temp" />
                        <label for="upload-input" class="btn-secondary"><i class="zmdi zmdi-upload"></i><span>[[${bundle.L('上传文件')}]]</span></label>
                      </div>
                    </div>
                    <div class="float-left ml-2" style="padding-top: 8px">
                      <u class="text-bold J_upload-input"></u>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-text mb-0">
                      <ul class="mb-0 pl-4">
                        <li>[[${bundle.L('有合并单元格的数据请处理过后再上传，否则可能出现表头识别有误')}]]</li>
                        <li>[[${bundle.L('系统默认仅识别第一个 SHEET，且会将首行识别为表头')}]]</li>
                        <li class="link" th:utext="${bundle.L('主实体与明细实体请分别导入，更多帮助请 [参考文档](https://getrebuild.com/docs/admin/data-import)')}"></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('遇到重复记录时')}]]</label>
                  <div class="col-md-12 col-xl-6 col-lg-8">
                    <div class="mt-1">
                      <label class="custom-control custom-control-sm custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="repeatOpt" value="1" checked="checked" />
                        <span class="custom-control-label">[[${bundle.L('更新')}]]</span>
                      </label>
                      <label class="custom-control custom-control-sm custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="repeatOpt" value="2" />
                        <span class="custom-control-label">[[${bundle.L('跳过')}]]</span>
                      </label>
                      <label class="custom-control custom-control-sm custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="repeatOpt" value="3" />
                        <span class="custom-control-label">[[${bundle.L('仍旧导入 (新建)')}]]</span>
                      </label>
                    </div>
                    <div class="J_repeatFields">
                      <label>
                        [[${bundle.L('重复判断字段')}]]
                        <i class="zmdi zmdi-help zicon" data-toggle="tooltip" th:title="${bundle.L('选择的字段必须存在字段映射，否则会导致重复判断有误')}"></i>
                      </label>
                      <select class="form-control form-control-sm" id="repeatFields" multiple="multiple"></select>
                    </div>
                    <div class="J_onlyUpdate mt-3">
                      <label class="custom-control custom-control-sm custom-checkbox custom-control-inline mb-0">
                        <input class="custom-control-input" type="checkbox" id="onlyUpdate" value="yes" />
                        <span class="custom-control-label">[[${bundle.L('仅更新不要新建')}]]</span>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="form-group row admin-show">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('记录所属用户')}]]</label>
                  <div class="col-md-12 col-xl-6 col-lg-8">
                    <div id="toUser"></div>
                    <div class="form-text mb-0">[[${bundle.L('不选择则默认为当前用户，如字段映射中指定了用户则以映射为准')}]]</div>
                  </div>
                </div>
                <div class="form-group row footer">
                  <div class="col-md-12 col-xl-6 col-lg-8 offset-xl-3 offset-lg-4">
                    <div id="user-warn" class="hide" style="margin-top: -15px; margin-bottom: 25px"></div>
                    <button class="btn btn-primary btn-space J_step1-btn" type="button">[[${bundle.L('下一步')}]]</button>
                  </div>
                </div>
              </form>
            </div>

            <div data-step="2" class="step-pane">
              <form class="simple">
                <div class="form-group row pt-0">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('设置字段映射')}]]</label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <table id="fieldsMapping" class="table table-hover">
                      <thead>
                        <tr>
                          <th width="240">[[${bundle.L('数据列')}]]</th>
                          <th width="240">[[${bundle.L('导入到字段')}]]</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
                <div class="form-group row footer">
                  <div class="col-md-12 col-xl-6 col-lg-8 offset-xl-3 offset-lg-4">
                    <button class="btn btn-primary btn-space J_step2-btn" type="button">[[${bundle.L('开始导入')}]]</button>
                    <button class="btn btn-link btn-space J_step2-return" type="button">[[${bundle.L('返回上一步')}]]</button>
                  </div>
                </div>
              </form>
            </div>

            <div data-step="3" class="step-pane">
              <form class="simple" style="margin: 30px auto">
                <div class="row mb-2">
                  <div class="col-6"><h5 class="text-bold m-0 p-0 J_import_state">[[${bundle.L('正在准备数据 ...')}]]</h5></div>
                  <div class="col-6 text-right text-muted">
                    <span>[[${bundle.L('耗时')}]] <span class="J_import_time">00:00:00</span></span>
                    <span class="ml-1 mr-1 text-bold">·</span>
                    <span>[[${bundle.L('速度')}]] <span class="J_import_speed"></span></span>
                    <span class="ml-1 mr-1 text-bold">·</span>
                    <span>[[${bundle.L('剩余时间')}]] <span class="J_remain_time">00:00:00</span></span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar J_import-bar"></div>
                </div>
                <div class="mt-3">
                  <button class="btn btn-danger btn-space J_step3-cancel" type="button">[[${bundle.L('终止导入')}]]</button>
                  <button class="btn btn-secondary btn-space J_step3-trace" type="button">[[${bundle.L('导入详情')}]]</button>
                  <a class="btn btn-link btn-space J_step3-next hide" href="data-imports">[[${bundle.L('继续导入')}]]</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</th:block>
